const baseUrl = 'http://api-breakingnews-web.itheima.net' // 根路径
// 1. 初始化裁剪插件
let cropper 

// 选择图片
$('.select').on('click', e => {
  e.preventDefault()
  // 触发input的file  click事件
  $('input[type=file]').click()
})
// 给input 注册一个onchange 事件
$('input[type=file]').on('change', function (e) {
  // this.files[0] => 可以预览的图片 => blob对象 => 供预览 => 访问地址
  // 包含 图片的信息 (大小 名字)   
  // console.log('修改了',e);
  // console.log('修改了',this.files); 
  const url = window.URL.createObjectURL(this.files[0]);
  // console.log(url);// 转成blob对象 (预览)
  // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper

  // 将blob对象 => 后台要求的base64的字符串
  // 生成的格式 => avatar=base64格式的字符串
})

// 确认按钮
$('.sure').on('click', e => {
  e.preventDefault()
  // blob对象 => base64
  // cropper => canvas
  const canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100
  });
  // canvas toDataURL => base64 
  // 后台通知 => 无法去解析当前的base64
  let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
  console.log(base64Str);
  // 进行编码 : = > % 
  base64Str = encodeURIComponent(base64Str);
  console.log(base64Str);
  // 后台要求的格式 avatar=base64格式的字符串
  const dataStr = `avatar=${base64Str}`
  // 发送请求
  axios.post(`${baseUrl}/my/update/avatar`, dataStr, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(res => {
    if(res.data.status === 0){
      window.parent._getUser()
    }
    // console.log(res);
  })
})


function getUser() {
  axios.get(`${baseUrl}/my/userinfo`, {
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(res => {
    const { status } = res.data
    if (status === 0) {
      const {user_pic } = res.data.data
      // 判断当前用户是否有头像信息,如果有的话=> 将裁剪框的图片显示做替换
      if(user_pic) $('#image').prop('src',user_pic)

      // image 设置完最新的图片信息之后 ,在做初始化cropper
      cropper = new Cropper($("#image")[0], {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
      });
      // console.log($("#image").prop('src'));
    }
    // 验证失败
    if (status === 1) {
      // 为了安全性=>为了代码的简洁性=> 将本地存储的token 清除掉
      localStorage.removeItem('token')
      location.href = '/login.html'
    }
  })
  
}

getUser()



// onchange事件  光标消失(跟图片修改上传相关)
// oninput事件   光标一直都在 实时获取input的值


// $('#image').cropper({
//   aspectRatio: 16 / 9,
//   crop: function(event) {
//     console.log(event.detail.x);
//     console.log(event.detail.y);
//     console.log(event.detail.width);
//     console.log(event.detail.height);
//     console.log(event.detail.rotate);
//     console.log(event.detail.scaleX);
//     console.log(event.detail.scaleY);
//   }
// });